<template>
	<view class="fen2_view">
		<view class="pht1">
			<image src="../../static/tou.png" class="touc_img"></image>
			<view class="chouzhong">
				恭喜您抽中
			</view>
			<view class="m_money">
				{{zMoney}}元
			</view>
<!-- 			<view class="evm_s">
				
			</view> -->
			<image :src="evmUrl" class="evm_s"></image>
			<canvas canvas-id="qrcode" class="evm_s noddd"></canvas>
			<!-- <view class="">
				<view class="yam_k">
					{{userInfo.code}}邀请码
				</view>
			</view> -->
			
			<view class="fen_btn" @click="copyText(cCode)">
				复制分享链接
			</view>
		</view>
		<view class="f_jl">
			分享记录
		</view>
		<view class="list_box">
			<view class="item_box" v-for="item in dataList">
				<image src="../../static/tou.png" class="tou_img"></image>
				<view class="c_r">
					<view class="c_name">
						{{item.name}}
					</view>
					<view class="zh">
						{{item.user}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import UQrcode from "./uqrcode.js";
	export default {
		data() {
			return {
				zMoney:"",
				dataList:[],
				cCode:"",
				evmUrl:""
			};
		},
		computed:{
			userInfo(){
				return this.$store.state.userInfo
			}
		},
		onLoad(ph) {
			this.zMoney = ph.money;
			let cUrl = window.location.href.split("#")[0] + "#/pages/index/index?code="+this.userInfo.code;
			this.cCode = cUrl;
			
			this.qrFun(cUrl)
		},
		onShow() {
			this.$getApi("/blog/Index/get_fenxiang_log", {userid:this.userInfo.id}, res => {
				console.log(res, "优惠券")
				this.dataList = res.data.data
			})
		},
		methods:{
			qrFun(text) {
				let this_ = this;
				console.log(text,"text")
				UQrcode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: text,
					size: 100,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: UQrcode.errorCorrectLevel.H,
					success: res => {
						console.log(res,"res--86")
						this_.evmUrl = res
					}
				})
			},
			copyText(text){
				uni.setClipboardData({
					data:text,
					success: function(){
						uni.showToast({
							title:"复制成功",
							duration:2000
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
.fen2_view{
	background: url(../../static/zhuanbg.png) #f9f2e1 no-repeat  center top;
	background-size: 100% 100vh;
	padding-top: 140rpx;
	padding-bottom: 80rpx;
	min-height: 100vh;
	.f_jl{
		padding: 20rpx;
		font-weight: bold;
	}
	.list_box{
		border: 1rpx solid #eee;
		border-radius: 16rpx;
		margin: 0 26rpx;
		background-color: #fff;
		.item_box{
			display: flex;
			padding: 26rpx 30rpx;
			align-items: center;
			&+.item_box{
				border-top: 1rpx solid #eee;
			}
			.tou_img{
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
			}
			.c_r{
				margin-left: 16rpx;
				.c_name{
					font-weight: bold;
				}
			}
		}
	}
	.pht1{
		background: url(../../static/cp1.png) no-repeat center center;
		background-size: 100% 100%;
		width: 660rpx;
		padding-bottom: 70rpx;
		margin: 0 auto;
		position: relative;
		text-align: center;
		padding-top: 105rpx;
		box-sizing: border-box;
		.chouzhong{
			color: #aaa;
			font-size: 32rpx;
			padding-bottom: 20rpx;
			font-weight: bold;
		}
		.touc_img{
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
			position: absolute;
			top: -75rpx;
			left: 50%;
			margin-left: -75rpx;
		}
		.m_money{
			font-size: 58rpx;
			color: #d4af5e;
			font-weight: bold;
		}
		.evm_s{
			width: 200rpx;
			height: 200rpx;
			background-color: #f0f0f0;
			margin: 40rpx auto 0;
			&.noddd{
				position: fixed;
				top: -10000px;
				left: 0;
			}
		}
		.yam_k{
			margin: 100rpx auto 40rpx;
			border: 1px solid #d4af5e;
			display: inline-block;
			padding: 4rpx 40rpx;
			border-radius: 30rpx;
			color: #999;
		}
		.fen_btn{
			display: block;
			padding: 14rpx 40rpx;
			border-radius: 60rpx;
			background-color: #172c3d;
			width: 400rpx;
			color: #fff;
			margin: 160rpx auto 0;
		}
	}
}
</style>
